<!--用户管理页面-->
<template>
  <el-table :data="arr">
    <el-table-column type="index" label="编号" width="100px"></el-table-column>
    <el-table-column label="用户名" prop="username"></el-table-column>
    <el-table-column label="昵称" prop="nickname"></el-table-column>
    <el-table-column label="头像">
      <template #default="scope">
        <el-avatar :src="BASE_URL+scope.row.imgUrl"></el-avatar>
      </template>
    </el-table-column>
    <el-table-column label="管理员">
      <template #default="scope">
        <el-switch v-model="scope.row.isAdmin"
                   :active-value="1" :inactive-value="0"
                   @change="changeAdmin(scope.row)"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" prop="createTime"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="del(scope.$index,scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary"
             style="width:100%;margin-top:15px;font-weight:bold;"
             @click="dialogVisible=true"
  >添加用户</el-button>
  <el-dialog title="添加用户" v-model="dialogVisible"
             style="padding-right:60px;border-radius:10px;">
    <el-form label-width="100px">
      <el-form-item label="用户名">
        <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input placeholder="请输入密码" v-model="user.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="add()">添加用户</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";
const dialogVisible = ref(false);
const user = ref({username:'',password:'',nickname:''})
const add = ()=>{
  dialogVisible.value = false;
  let data = qs.stringify(user.value);
  axios.post(BASE_URL+'/v1/users/reg',data).then((response)=>{
    if(response.data.code==2001){
      ElMessage.success('新增成功!');
      loadData();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const changeAdmin = (user)=>{
  //准备查询字符串,包含用户id与管理员状态
  let data = qs.stringify({id:user.id,isAdmin:user.isAdmin});
  axios.post(BASE_URL+'/v1/users/update',data)
  .then((response)=>{
    if(response.data.code==2001){
      ElMessage.success('修改完成!');
    }
  })
}
  const arr = ref([]);
const loadData = ()=>{
  axios.get(BASE_URL+'/v1/users/admin').then((response)=>{
    if(response.data.code==2001){
      arr.value= response.data.data;
      console.log(arr.value);
    }
  })
}

  onMounted(()=>{
    loadData();
  })

  const del = (i,user)=>{
    if(confirm('您确认要删除'+user.nickname+'吗?')){
      axios.post(BASE_URL+'/v1/users/'+user.id+'/delete')
      .then((response)=>{
        if(response.data.code==2001){
          ElMessage.success(user.nickname+'已被删除!');
          arr.value.splice(i,1);
        }
      })
    }
  }
</script>

<style scoped>

</style>